<template v-if="detail_Data">
    <s-layout id="layout" :title="'邮寄合同详情'" navbar="normal" leftIconColor="#ffffff" :autoBack="true" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#ffffff', fontSize: '32rpx',fontWeight:'600' }">
        <!-- 最大盒子 -->
        <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
            <view class="area form_box">
                <scroll-view scroll-y :style="{ height: state == '1' && jurisdiction.includes(group_id) ? '78vh' : '83vh' }" :enable-back-to-top="true" v-if="detail_Data">
                    <view class="totality_box">
                        <view class="top_item">
                            <view class="head_box">
                                <view class="avatar_box">
                                    <image :src="`${baseUrl}` + detail_Data.user.avatar" mode="aspectFill"/>
                                </view>
                                <view class="message">
                                    <view class="title">{{ detail_Data.user.nickname }}提交的合同</view>
                                    <view class="time">{{ formatDatetime(detail_Data.createtime) }} 提交{{ state }}</view>
                                </view>
                            </view>
                            <!-- 详情盒子1 -->
                            <view class="detail_box">
                                <!-- 项目 -->
                                <view class="detail_item">
                                    <view class="label_box">部门:</view>
                                    <view class="content_box">{{ detail_Data.department?.company.name }}/{{  detail_Data.department.name }}</view>
                                </view>
                                <!-- 公司名称 -->
                                <view class="detail_item">
                                    <view class="label_box">公司名称:</view>
                                    <view class="content_box">{{ detail_Data.company_name }}</view>
                                </view>
                                <!-- 邮寄城市 -->
                                <view class="detail_item">
                                    <view class="label_box">邮寄城市:</view>
                                    <view class="content_box">{{ detail_Data.mail_city }}</view>
                                </view>
                                <!-- 合作业务 -->
                                <view class="detail_item">
                                    <view class="label_box">合作业务:</view>
                                    <view class="content_box">{{ detail_Data.business }}</view>
                                </view>
                                <!-- 详细地址 -->
                                <view class="detail_item_address">
                                    <view class="label_box_address">详细地址:</view>
                                    <view :max="'200'" class="content_box_address">{{ detail_Data.address }}</view>
                                </view>
                            </view>
                        </view>
                        <view v-if="state !== '0'" class="bottom_item">
                            <view class="message">
                                <view>
                                    邮寄填写
                                    <view class="glide"></view>
                                </view>
                                <view class="copy_box" @tap="pathCopy">
                                    <view class="copy_image">
                                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/icon_invoicecopy@2.png`" mode="scaleToFill"/>
                                    </view>
                                    <view class="copy_title">一键复制</view>
                                </view>
                            </view>
                            <!-- 详情盒子2 -->
                            <view class="detail_box">
                                <!-- 单号 -->
                                <view class="detail_item">
                                    <view class="label_box">单号:</view>
                                    <view class="content_box">{{ detail_Data.tracking_num }}</view>
                                </view>
                                <!-- 快递公司 -->
                                <view class="detail_item">
                                    <view class="label_box">快递公司:</view>
                                    <view class="content_box">{{ detail_Data.tracking_company }}</view>
                                </view>
                                <!-- 接收人姓名 -->
                                <view class="detail_item">
                                    <view class="label_box">接收人姓名:</view>
                                    <view class="content_box">{{ detail_Data.recipients }}</view>
                                </view>
                                <!-- 接收人电话 -->
                                <view class="detail_item">
                                    <view class="label_box">接收人电话:</view>
                                    <view class="content_box">{{ detail_Data.recipients_tel }}</view>
                                </view>
                                <!-- 详细地址 -->
                                <view class="detail_item_address">
                                    <view class="label_box_address">详细地址:</view>
                                    <view class="content_box_address">{{ detail_Data.recipients_address }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>

    </s-layout>

    <!-- 底部保存按钮 -->
    <view v-if="state == '1' && jurisdiction.includes(group_id)">
        <s-button @netWork="confirm_receipt" :text="'确认收货'" />
    </view>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    import { formatDatetime } from '@/utils/fn.js';
    import { isEmpty } from '@/sheep/helper/utils.js'
    import { province,city } from '../evection/city.js'
    const { safeAreaInsets } = uni.getSystemInfoSync()
    onLoad((option) => {
        const userStoreValue = uni.getStorageSync('user-store');
        const userStoreObject = JSON.parse(userStoreValue)
        group_id.value = userStoreObject.userInfo.group_id
        contract_traceabilityViewData(option.ids)
        id.value = option.ids
    })

    const group_id = ref()
    const jurisdiction = ref([4,6])
    const state = ref('')

    // 封装获取详情接口
    const detail_Data = ref()
    const copy_message = ref()
    const contract_traceabilityViewData = async (ids) => {
        let params = {
            ids:ids
        }
        const res = await sheep.$api.contract_traceability.contract_traceabilityViewAPI(params)
        detail_Data.value = res.data
        state.value = detail_Data.value.state
        copy_message.value = `单号：${detail_Data.value.tracking_num}\n快递公司：${detail_Data.value.tracking_company}\n接收人姓名：${detail_Data.value.recipients}\n接收人电话：${detail_Data.value.recipients_tel}\n详细地址：${detail_Data.value.recipients_address}`
    }

    // 确认收货
    const id = ref()
    const confirm_receipt = () => {
        let params = {
            ids:id.value
        }
        confirmReceipt(params)
    }

    // 封装确认收货接口
    const confirmReceipt = async (params) => {
        const res = await sheep.$api.contract_traceability.contract_traceabilityConfirmAPI(params)
        if(res.code == 1) {
            setTimeout(() => {
                sheep.$router.back(true)
            },1000)
        } else {
            setTimeout(()=> {
                sheep.$helper.toast(res.msg);
                // uni.showToast({
                //     title:res.msg,
                //     icon:'none'
                // })
            },1000)
        }
    }

    // 一键复制
    const pathCopy = () => {
        sheep.$helper.copyText(copy_message.value)
    }

</script>

<style lang="scss" scoped>

    :deep(.u-form-item__body){
        height: 80rpx;
        margin-bottom:10rpx;
    }

    // :deep(.u_form-item) {
    //     &:not(:nth-last-child(2)) {
    //         .u-form-item__body {
    //             height: 80rpx;
    //             background-color: red !important;
    //         }
    //     }
    // }

    // uview 内部样式 u-form-item 背景颜色
    // :deep(.u-form-item){
    //     &:nth-last-child(1) {
    //         .u-form-item__body {
    //             margin-bottom:10rpx;
    //             background-color: #F9FAFF !important;
    //         }
    //     }
    //     &:nth-last-child(4) {
    //         .u-form-item__body {
    //             margin-bottom:10rpx;
    //             background-color: #ffffff !important;
    //         }
    //     }
    // }
    :deep(.u-form-item) {
        &:not(:nth-last-child(2)) {
            .u-form-item__body {
                background-color: #F9FAFF !important;
            }
        }
    }

    :deep(.u-textarea.data-v-31706dd7) {
        background-color: #F9FAFF;
        padding: 0;
        margin-bottom:10rpx;
    }

    // uview 内部样式 表单验证 警告文字距离
    :deep(.u-form-item__body__right__message.data-v-b4fd400b) {
        margin-left: 0 !important;
    }

    // uview 内部样式 up-textarea 文字距离
    :deep(.u-textarea__field.data-v-31706dd7) {
        margin-top: 30rpx;
        margin-left: 30rpx;
    }

    // uview 内部样式 输入内容右边间距
    :deep(.u-input__content__field-wrapper__field.data-v-5904192e) {
        margin-right: 20rpx;
    }

    // uview 内部样式 label左边间距
    :deep(.u-form-item__body__left.data-v-b4fd400b) {
        margin-left: 20rpx;
    }

    // uview 内部样式 label字体粗细
    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
        font-weight: $uni-font-weight;
    }

    // 最大盒子
    .container {
        width: 100%;
        background-size: cover; /* 或 contain */
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    // 表单盒子
    .form_box {
        width: calc(100% - 40rpx);
        // padding: 60rpx 30rpx;
        margin-top: 20rpx;
        // border-radius: 16rpx;
        // background-color: #FFFFFF;
        // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    }
    // 备注
    .remark {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
    }

    // 用户信息
    .totality_box {
        // 用户信息盒子
        .head_box {
            height: 164rpx;
            background-color: $uni-bg-color;
            border-bottom: 2rpx solid #efefef;
            display: flex;
            align-items: center;
            // 头像盒子
            .avatar_box {
                width: 104rpx;
                height: 104rpx;
                border-radius: 50%;
                margin-right: 30rpx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            // 信息盒子
            .message {
                .title {
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                    margin-bottom: 12rpx;
                }
                .time {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: 500;
                    font-size: $uni-font-size-sm;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                }
            }
        }
    }

    .top_item {
        // height: 850rpx;
        background-color: $uni-bg-color;
        padding: 0rpx 30rpx 40rpx 30rpx;
        border-radius: 16rpx;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        
    }
    .bottom_item {
        // height: 740rpx;
        background-color: $uni-bg-color;
        padding: 40rpx 30rpx;
        margin-top: 20rpx;
        border-radius: 16rpx;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        // 邮寄填写盒子
        .message {
            display: flex;
            align-items: center;
            justify-content: space-between; /* 左右对齐 */
            width: 100%;
            height: 48rpx;
            margin-bottom: 30rpx;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 34rpx;
            font-style: normal;
            text-decoration: none;
            position: relative;
            .glide {
                width: 92rpx;
                height: 14rpx;
                border-radius: 5px;
                background-color: rgba(0, 56, 247, 0.5);
                position: absolute;
                bottom: 0;
                left: 20rpx;
            }
            // 复制盒子
            .copy_box {
                display: flex;
                align-items: center;
                .copy_image {
                    display: flex;
                    align-items: center;
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 10rpx;
                    image {
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
                .copy_title {
                    font-family: PingFangSC;
                    color: $uni-color-primary;
                    font-weight: 700;
                   font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                }
            }
        }
    }

    // 详情盒子
    .detail_box {
        // height: 590rpx;
        margin-top: 60rpx;
            // 详情每一项
        .detail_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 64rpx;
            // 详情标题
            .label_box {
                font-family: PingFangSC;
                color: #666666;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
            }
            // 详情内容
            .content_box {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                text-align: right;
            }
        }
            // 详情地址
        .detail_item_address {
            .label_box_address {
                width: 100%;
                height: 80rpx;
                font-family: PingFangSC;
                color: #666666;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
            }
            .content_box_address {
                // height: 96rpx;
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                padding: 32rpx 30rpx;
                background-color: #F9FAFF;
                border-radius: 16rpx;
                
            }
        }
    }
</style>


